<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .adver {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }

        .adver-top {
            font-size: 14px;
            line-height: 30px;
        }

        .adver-top .adver-title {
            text-indent: 10px;
        }

        .adver-top .adver-close {
            padding: 0 5px;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- <div class="adver">
        <div class="adver-top">
            <div class="adver-title">距离广告关闭还有10秒</div>
            <div class="adver-close">X</div>
        </div>
        <div class="adver-detail">
            <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
        </div>
    </div> -->

</body>
<script>
    // JS动态生成   

    // 1. 流程
    // a. 先写静态页面
    // b. 在动态生成

    // 2. 方法
    // a. 模板字符串动态生成  => 先将html结构拼接为一个整体,在放到页面中

    // 优点:
    // 可以根据既定的模板 快速生成html结构

    // 缺点:
    // 在没有放到页面之前,只是字符串 => 无法直接给字符串绑定事件 => 只能等html结构放到页面中之后,再获取元素和绑定事件

    // 常见案例:  商品列表渲染  成绩列表渲染



    // b. DOM创建   => 动态创建dom元素,依次放到页面中
    // 优点:
    // 可以在创建元素的过程中 动态添加样式 属性 内容 事件(主要是事件  => 创建之后绑定事件)

    // 缺点:
    // 创建起来比较麻烦 => 对于复杂的html结构 => 太花时间,结构不清晰

    // 常见案例: 插件编写 => 只能引入样式和方法,调用即可




    var html = '';

    for (var i = 0; i < 10; i++) {
        html += `<li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk"
            href="//item.jd.com/10028258999964.html" target="_blank"
            title="亚当贝尔 英特尔酷睿i7/独显/16G家用办公电竞游戏吃鸡设计师炒股组装台式电脑主机整机全套 主机+19英寸显示器 配置二：酷睿i7/游戏独显/16G/256G"
            aria-label="亚当贝尔 英特尔酷睿i7/独显/16G家用办公电竞游戏吃鸡设计师炒股组装台式电脑主机整机全套 主机+19英寸显示器 配置二：酷睿i7/游戏独显/16G/256G"
            clstag="h|keycount|feed|01#pd_001-a">
            <div class="lazyimg lazyimg_loaded more2_img"><img
                    src="//img13.360buyimg.com/jdcms/s300x300_jfs/t1/217600/36/4702/143790/6194b2ccEf0d66c96/d7a3eaed9df0f5c5.jpg.webp"
                    class="lazyimg_img"
                    alt="亚当贝尔 英特尔酷睿i7/独显/16G家用办公电竞游戏吃鸡设计师炒股组装台式电脑主机整机全套 主机+19英寸显示器 配置二：酷睿i7/游戏独显/16G/256G"></div>
            <div class="more2_info">
                <p class="more2_info_name">亚当贝尔 英特尔酷睿i7/独显/16G家用办公电竞游戏吃鸡设计师炒股组装台式电脑主机整机全套 主机+19英寸显示器
                    配置二：酷睿i7/游戏独显/16G/256G</p>
                <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                    <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">2080.<span
                                class="more2_info_price_txt-decimal">00</span></span></div>
                    <div class="more2_price_plus">
                        <div class="more2_discount">券</div>
                    </div>
                </div>
            </div>
            <div class="more2_item_hover">
                <div class="more2_item_delete" clstag="h|keycount||feed|01#pd_001-b" title="不喜欢"></div>
                <div class="more2_item_hd" title="">
                    <div class="more2_item_btn more2_btn_find enable" clstag="h|keycount||feed|01#pd_001-c"><i
                            class="more2_btn_icon"></i><span>找相似</span></div>
                </div>
            </div>
        </a></li>`
    }


</script>

</html>